<template>
  <div class="container">
    <div class="BookTop">
      <!-- 上半部分内容 -->
      <BookTop />
    </div>
    <div class="BookBottom">
      <!-- 下半部分内容 -->
      <BookBottom />
    </div>
  </div>
</template>
  
  <script>
import BookTop from "./BookTop.vue";
import BookBottom from "./BookBottom.vue";

export default {
  name: "BookBorrowing",
  // 在父组件中可以像使用普通元素一样使用这个组件，并在上下半部分插入内容
  components: {
    BookTop,
    BookBottom,
  },
};
</script>
  
  <style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 设置容器高度 */
  width: 100%;
}
/* 如果内容过多，可滚动 */
/* .BookTop,
  .BookBottom {
    overflow: auto; 
  } */

.BookTop {
  flex: 3.7;
  margin-bottom: 20px;
  /* background-color: rgb(198, 247, 247); */
}
.BookBottom {
  flex: 7.5;
  /* background-color: rgb(224, 250, 232); */
  /* border-radius: 10px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
</style>
  